<template>
    <button
      ref="_ref"
      class="dl-button"
      :class="{
        [`dl-button--${type}`]:type,
        [`dl-button--${size}`]:size,
        'is-plain':plain,
        'is-round':round,
        'is-circle':circle,
        'is-disabled':disabled,
        'is-loading':loading
      }"
      :disabled="disabled || loading" 
      :autofocus="autofocus"
      :type="nativeType"
    >
      <dl-icon v-if="loading" icon="spinner"  spin />
      <dl-icon v-if="icon" :icon="icon" />
      <span>
        <slot></slot>  
      </span>
    </button>
</template>

<script setup lang="ts">
import type { ButtonProps } from './types';
import { ref } from 'vue';
import dlIcon from '../Icon/Icon.vue';

defineOptions({
  name:'dlButton'
})
withDefaults(defineProps<ButtonProps>(),{
  nativeType:'button'
})

const _ref = ref<HTMLButtonElement>()

// defineExpose导出的属性会自动解包
defineExpose({
  // 导出方便dl-button组件能获取到button实例
  ref:_ref
})
</script>

<style>

</style>